<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>我的订单 - ${systemName}</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-icons/font/bootstrap-icons.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/client.css">
    <style>

        .order-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .order-header {
            padding: 1.25rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 10px 10px 0 0;
        }

        .order-header:hover {
            background-color: #f8f9fa;
        }


        .order-details {
            overflow: hidden;
            transition: all 0.3s ease;
            max-height: 0;
            opacity: 0;
        }

        .order-details.show {
            max-height: 2000px; /* 足够大的值容纳内容 */
            opacity: 1;
        }

        .order-status {
            font-weight: 600;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
        }


        .order-item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s;
        }

        .order-item:hover {
            background-color: #f8f9fa;
        }

        .order-summary {
            padding: 1.25rem;
            background-color: #f8f9fa;
            border-radius: 0 0 10px 10px;
        }

        .total-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: #dc3545;
        }

        .order-number {
            font-weight: 600;
            color: #333;
        }

        .order-time {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .product-title {
            font-weight: 500;
            margin-bottom: 0.25rem;
        }

    </style>
</head>
<body>
<jsp:include page="/WEB-INF/views/client/common/nav.jsp"/>
<div class="container mt-4 mb-5 flex-grow-1">
    <%--    <h2 class="mb-4">我的订单</h2>--%>

    <c:choose>
        <c:when test="${not empty orderList}">
            <c:forEach items="${orderList}" var="order">
                <div class="card order-card">
                    <!-- 订单头部 -->
                    <div class="order-header d-flex justify-content-between align-items-center">
                        <div class="d-flex flex-column flex-md-row align-items-md-center">
                            <span class="order-number me-md-3 mb-1 mb-md-0">订单号: ${order.number}</span>
                            <span class="order-time me-md-3"><fmt:formatDate value="${order.orderTime}"
                                                                             pattern="yyyy-MM-dd"/></span>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="order-status status-${order.status} me-3">
                                <c:choose>
                                    <c:when test="${order.status == 0}">待付款</c:when>
                                    <c:when test="${order.status == 1}">已支付</c:when>
                                    <c:when test="${order.status == 9}">已取消</c:when>
                                </c:choose>
                            </span>
                                <%--                            <i class="bi bi-chevron-down toggle-icon"></i>--%>
                        </div>
                    </div>
                    <div class="order-header d-flex justify-content-between align-items-center">
                        <span class=" me-md-3 mb-1 mb-md-0">收货人: ${order.name}</span>
                    </div>
                    <div class="order-header d-flex justify-content-between align-items-center">
                        <span class="me-md-3 mb-1 mb-md-0">手机号: ${order.phone}</span>
                    </div>
                    <div class="order-header d-flex justify-content-between align-items-center">
                        <span class=" me-md-3 mb-1 mb-md-0">地址: ${order.address}</span>
                    </div>
                    <!-- 订单详情 - 默认全部折叠 -->
                    <div class="order-details show" id="order-${order.id}">
                        <!-- 订单商品列表 -->
                        <div class="order-items">
                            <c:forEach items="${order.orderItemList}" var="item">
                                <div class="order-item d-flex align-items-center">
                                    <img

                                    <c:choose>
                                    <c:when test="${item.product.image != null && item.product.image.contains('.')}">
                                            src="${pageContext.request.contextPath}/image/product/${item.product.image}"
                                    </c:when>
                                    <c:otherwise>
                                            src="${pageContext.request.contextPath}/public?method=image&id=${item.product.image}"

                                    </c:otherwise>
                                    </c:choose>


                                            class="img-thumbnail me-3 flex-shrink-0"
                                            style="width: 80px; height: 100px; object-fit: contain;"
                                            alt="${item.product.name}">
                                    <div class="flex-grow-1 me-3">
                                        <div class="product-title">${item.product.name}</div>
                                        <div class="product-author">${item.product.description}</div>
                                    </div>
                                    <div class="text-end me-3">
                                        <div class="text-danger fw-bold">¥${item.price}</div>
                                        <div class="text-muted">x${item.quantity}</div>
                                    </div>
                                    <div class="fw-bold text-nowrap">
                                        ¥<fmt:formatNumber value="${item.price * item.quantity}" pattern="#,##0.00"/>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>

                        <!-- 订单汇总 -->
                        <div class="order-summary d-flex justify-content-between align-items-center">
                            <div>
                                <c:if test="${order.status ==0}">
                                    <a href="${pageContext.request.contextPath}/client/order?method=pay&orderId=${order.id}"
                                       class="btn btn-sm btn-primary me-2">立即支付</a>
                                    <a href="${pageContext.request.contextPath}/client/order?method=cancel&orderId=${order.id}"
                                       class="btn btn-sm btn-outline-secondary">取消订单</a>
                                </c:if>
                                    <%--                                <c:if test="${order.status == 'shipped'}">--%>
                                    <%--                                    <a href="${pageContext.request.contextPath}/order?m=confirm&orderId=${order.id}" class="btn btn-sm btn-primary">确认收货</a>--%>
                                    <%--                                </c:if>--%>
                            </div>
                            <div class="text-end">
                                <div class="text-muted mb-1">共 ${order.orderItemList.size()} 件商品</div>
                                <div class="total-price">合计: ¥<fmt:formatNumber value="${order.totalPrice}"
                                                                                  pattern="#,##0.00"/></div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </c:when>
        <c:otherwise>
            <div class="text-center py-5">
                <i class="bi bi-box-seam" style="font-size: 3rem; color: #6c757d;"></i>
                <p class="mt-3">您还没有任何订单</p>
                <a href="${pageContext.request.contextPath}/" class="btn btn-primary mt-2">去逛逛</a>
            </div>
        </c:otherwise>
    </c:choose>
</div>
<jsp:include page="/WEB-INF/views/client/common/footer.jsp"/>
<script>
  // 切换订单详情显示/隐藏
  // function toggleOrderDetails(orderId) {
  //   const details = document.getElementById(orderId);
  //   const header = details.previousElementSibling;
  //   const icon = header.querySelector('.toggle-icon');
  //
  //   details.classList.toggle('show');
  //   header.classList.toggle('order-header-collapsed');
  //
  //   if (details.classList.contains('show')) {
  //     icon.classList.remove('bi-chevron-down');
  //     icon.classList.add('bi-chevron-up');
  //   } else {
  //     icon.classList.remove('bi-chevron-up');
  //     icon.classList.add('bi-chevron-down');
  //   }
  // }

  // // 页面加载时初始化图标
  // document.addEventListener('DOMContentLoaded', function () {
  //   document.querySelectorAll('.order-details').forEach(function (el) {
  //     const header = el.previousElementSibling;
  //     const icon = header.querySelector('.toggle-icon');
  //
  //     if (el.classList.contains('show')) {
  //       icon.classList.remove('bi-chevron-down');
  //       icon.classList.add('bi-chevron-up');
  //     }
  //   });
  //
  // });
</script>
</body>
</html>
